<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.common.js"></script>
<div class="row-content am-cf">

    <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
        <div class="widget widget-primary am-cf">
            <div class="widget-statistic-header">
                运行状态
            </div>
            <div class="widget-statistic-body">
                <div class="widget-statistic-value">
                      运行中
                </div>

            </div>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
        <div class="widget widget-primary am-cf">
            <div class="widget-statistic-header">
                我的设备量
            </div>
            <div class="widget-statistic-body">
                <div class="widget-statistic-value" th:text="${systemInfo.deviceCount}">

                </div>

            </div>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
        <div class="widget widget-purple am-cf">
            <div class="widget-statistic-header">
               当前在线
            </div>
            <div class="widget-statistic-body">
                <div class="widget-statistic-value" th:text="${systemInfo.onlineDevice}">
                </div>

            </div>
        </div>
    </div>


    <div class="am-u-sm-12 am-u-md-4">
        <div class="widget am-cf">
            <div class="widget-head am-cf">
                <div class="widget-title am-fl">服务器信息</div>
                <div class="widget-function am-fr">
                    <a href="javascript:;" class="am-icon-cog"></a>
                </div>
            </div>

            <div class="widget-body widget-body-md am-fr">
                <ul>
                    <li th:text="|操作系统：${systemInfo.osName}|"></li>
                    <li th:text="| 操作系统架构：${systemInfo.osArch}|"></li>
                    <li th:text="|操作系统版本：${systemInfo.osVersion}|"></li>
                    <li th:text="| 总内存：${systemInfo.totalMemory}|"></li>
                    <li th:text="|空余内存：${systemInfo.freeMemory}|"></li>
                    <li th:text="|已用内存：${systemInfo.alreadyUse}|"></li>
                </ul>

            </div>
        </div>
    </div>




    <div class="am-u-sm-12 am-u-md-4">
        <div class="widget am-cf">
            <div class="widget-head am-cf">
                <div class="widget-title am-fl">项目信息</div>
                <div class="widget-function am-fr">
                    <a href="javascript:;" class="am-icon-cog"></a>
                </div>
            </div>

            <div class="widget-body widget-body-md am-fr">
                <ul>
                    <li>github地址:<a href="https://github.com/wwhai/easylinker/">https://github.com/wwhai/easylinker/</a></li>
                    <li>OSC地址:<a href="https://www.oschina.net/p/easylinker">https://www.oschina.net/p/easylinker</a></li>

                </ul>

            </div>
        </div>
    </div>



    <div class="am-u-sm-12 am-u-md-4">
        <div class="widget am-cf">
            <div class="widget-head am-cf">
                <div class="widget-title am-fl">帮助中心</div>
                <div class="widget-function am-fr">
                    <a href="javascript:;" class="am-icon-cog"></a>
                </div>
            </div>

            <div class="widget-body widget-body-md am-fr">
                <ul>
                    <li>快速开始</li>
                    <li>熟悉系统</li>
                    <li>接入设备</li>
                    <li>开源社区</li>
                    <li>REST文档:</li>
                </ul>

            </div>
        </div>
    </div>



    <div class="am-u-sm-6" style="background-color: #FFFFFF">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="chart1" style="width: 800px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('chart1'));
            var option = {
                title : {
                    text: '近期数据请求量',
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['请求量']
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

                    },
                    {
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],

                    }
                ]
            };

            myChart.setOption(option);
        </script>

    </div>







    <div class="am-u-sm-6" style="background-color: #FFFFFF">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="chart2" style="width: 800px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('chart2'));
            var option = {
                title : {
                    text: '近期数据请求量',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },

                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],

                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                            {value:335, name:'直达', selected:true},
                            {value:679, name:'营销广告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                    },
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['40%', '55%'],

                        data:[
                            {value:335, name:'直达'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1048, name:'百度'},
                            {value:251, name:'谷歌'},
                            {value:147, name:'必应'},
                            {value:102, name:'其他'}
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        </script>

    </div>
</div>
